<template>
	<view>
		<view class="content"><text>* </text>为必填项，信息越详细推送越精准！</view>
		<view class="middle">
			<view class="middle_key">
				<view><text>* </text>车长</view>
				<view @click="zhankai()">
					<image src="../../static/iocn12.png" v-if="yincang == true"></image>
					<image src="../../static/iocn14.png" v-else></image>
				</view>
			</view>
			<view class="middle_box" :style="{'height': vheiget}">
				<view class="middle_kste">
					<view @click="dianji(index,item)" :class="namIndex == index ?'active':''"
						v-for="(item,index) in Length" :key="index">{{item.name}}</view>
				</view>
				<view class="middle_list">
					<text>其他</text>
					<view>
						<input type="text" v-model="length" placeholder="请输入车长" />米
					</view>
				</view>
			</view>
		</view>


		<view class="middle">
			<view class="middle_key">
				<view><text>* </text>车型</view>
				<view @click="mzhankai()">
					<image src="../../static/iocn12.png" v-if="myincang == true"></image>
					<image src="../../static/iocn14.png" v-else></image>
				</view>
			</view>
			<view class="middle_box" :style="{'height': mvheiget}">
				<view class="middle_kste">
					<view @click="mdianji(index,item)" :class="mnamIndex == index ?'active':''"
						v-for="(item,index) in motorcycle" :key="index">{{item.name}}</view>
				</view>
			</view>
		</view>

		<view class="middle">
			<view class="middle_key">
				<view><text>* </text>车辆载重（吨）</view>
				<view @click="wzhankai()">
					<image src="../../static/iocn12.png" v-if="wyincang == true"></image>
					<image src="../../static/iocn14.png" v-else></image>
				</view>
			</view>
			<view class="middle_box" :style="{'height': wvheiget}">
				<view class="middle_kste">
					<view @click="wdianji(index,item)" :class="wnamIndex == index ?'active':''"
						v-for="(item,index) in weight" :key="index">{{item.name}}</view>
				</view>
				<view class="middle_view">
					<input type="text" v-model="load" placeholder="输入车辆载重" />
					<!-- <text></text>
					<input type="text" placeholder="输入最大吨数"/> -->
				</view>
			</view>
		</view>

		<view class="footer" @click="TruckSetting()">确认</view>

	</view>
</template>

<script>
	import {
		GetDics,
		TruckSetting
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				Length: [],
				yincang: true,
				vheiget: '',
				namIndex: '100',
				carNumber: '',
				motorcycle: [],
				myincang: true,
				mvheiget: '',
				mnamIndex: '100',

				weight: [],
				wyincang: true,
				wvheiget: '',
				wnamIndex: '100',
                success:{},

				length: '',
				style: '',
				load: ''
			};
		},

		onLoad(option) {
			this.TruckLength()
			this.TruckType()
			this.GoodsWeight()
			this.carNumber = option.num
			console.log(this.carNumber)
		},

		methods: {
			dianji(index, item) {
				this.namIndex = index
				console.log(item.name)
				this.length = item.name
			},
			zhankai() {
				var yincang = this.yincang
				if (yincang == true) {
					this.yincang = false
					this.vheiget = 100 + '%'
				} else if (yincang == false) {
					this.yincang = true
					this.vheiget = 67 + 'upx'
				}
			},


			mdianji(index, item) {
				this.mnamIndex = index
				this.style = item.name
			},
			mzhankai() {
				var yincang = this.myincang
				if (yincang == true) {
					this.myincang = false
					this.mvheiget = 100 + '%'
				} else if (yincang == false) {
					this.myincang = true
					this.mvheiget = 67 + 'upx'
				}
			},




			wdianji(index, item) {
				this.wnamIndex = index
				this.load = item.name
			},
			wzhankai() {
				var yincang = this.wyincang
				if (yincang == true) {
					this.wyincang = false
					this.wvheiget = 100 + '%'
				} else if (yincang == false) {
					this.wyincang = true
					this.wvheiget = 67 + 'upx'
				}
			},


			// 获取字典列表  获取车长
			async TruckLength() {
				try {
					const {
						data: res
					} = await GetDics({
						layout: 'TruckLength'
					})
					this.Length = res.result
				} catch (e) {}
			},

			// 获取字典列表  获取车型
			async TruckType() {
				try {
					const {
						data: res
					} = await GetDics({
						layout: 'TruckType'
					})
					this.motorcycle = res.result
				} catch (e) {}
			},

			// 获取字典列表  获取货物重量
			async GoodsWeight() {
				try {
					const {
						data: res
					} = await GetDics({
						layout: 'GoodsWeight'
					})
					this.weight = res.result
				} catch (e) {}
			},


			async  TruckSetting() {
				var userId = getValue('id')
				var length = this.length
				var style = this.style
				var load = this.load
				var color = 1
				var carNumber=this.carNumber
				if (length == '') {
					uni.showToast({
						title: "车长不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (style == '') {
					uni.showToast({
						title: "车型不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (load == '') {
					uni.showToast({
						title: "车辆载重不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				try {
					const {
						data: res
					} = await TruckSetting({
						userId,
						length,
						style,
						load,
						color,
						carNumber
					})
					this.success=res.result
					
				} catch (e) {}
				setValue('length', length);
				setValue('style', style);
				setValue('load', load);
				if(this.success.message=="ok"){
					uni.showToast({
						title:"车型设置成功",
						icon: 'success',
						
					})
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 30upx 45upx;
	}

	.content {
		display: inline-block;
		background: rgba(240, 77, 62, 0.1);
		padding: 0 10upx;
		font-size: 21upx;
		color: #000;

		text {
			color: #EF4D3D;
			margin-right: 10upx;
		}
	}

	.middle {
		padding-top: 60upx;

		.middle_key {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 32upx;
				height: 32upx;

			}

			view {
				font-size: 28upx;
				color: #000;
				font-weight: bold;
			}

			text {
				color: #EF4D3D;
				margin-right: 10upx;
			}
		}

		.middle_box {
			overflow: hidden;
			height: 67upx;

			.middle_kste {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				view {
					width: 136upx;
					height: 52upx;
					opacity: 1;
					border-radius: 10upx;
					background: #E5E5E5;
					font-size: 28upx;
					text-align: center;
					line-height: 52upx;
					margin-top: 15upx;
					margin-right: 20upx;
				}

				.active {
					background-color: #EF4D3D;
					color: #fff;
				}
			}

			.middle_view {
				display: flex;
				align-items: center;
				padding-top: 20upx;

				input {
					width: 254upx;
					height: 52upx;
					opacity: 1;
					border-radius: 10upx;
					background: #E5E5E5;
					font-size: 24upx;
					color: #000;
					text-align: center;
					font-weight: bold;
				}

				text {
					width: 64upx;
					height: 1upx;
					background-color: #ccc;
					margin: 0 20upx;
				}
			}

			.middle_list {
				display: flex;
				align-items: center;
				padding-top: 25upx;

				text {
					font-size: 24upx;
					color: #000;
				}

				view {
					display: flex;
					align-items: center;
					border-bottom: 1upx solid #000;
					margin-left: 10upx;
					font-size: 24upx;

					input {
						font-size: 24upx;
						width: 150upx;
						text-align: center;
					}
				}
			}
		}
	}

	.footer {
		width: 436upx;
		height: 71upx;
		opacity: 1;
		border-radius: 17upx;
		background: #F04D3E;
		font-size: 38upx;
		color: #fff;
		text-align: center;
		line-height: 71upx;
		margin: 0 auto;
		margin-top: 80upx;
	}
</style>
